import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route,Link,hashHistory,IndexRoute, Redirect} from 'react-router';
import Menus from './Menus';
require('es6-promise').polyfill();
require('isomorphic-fetch');

export default class InputAddRess extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            errorMessage:'',
            show:false,
            userid:localStorage.getItem('userid')
        }
    }
    changeStateVal(errorMessage,show){
        this.setState({
            errorMessage:errorMessage,
            show:show
        })
    }

    addAddress(){
        let addres=ReactDOM.findDOMNode(this.refs.address);
        let villageName= addres.querySelector("#villageName").value;
        let houseNumber= addres.querySelector("#houseNumber").value;

        if(villageName==null || villageName==""){
            this.changeStateVal("请输入小区名或大厦名，并在下拉列表中选择.",true);
        }else if(houseNumber==null || houseNumber==""){
            this.changeStateVal("请输入详细门牌号",true);
        }else {
            let addressContent={
                'villageName':villageName,
                'houseNumber':houseNumber,
                'userid':this.state.userid
            }
            /*
             body:JSON.stringify(addressContent),
             */
            fetch('text/addRess.json',
                {
                    method: 'get',
                    headers: {
                        'Accept': 'application/json',
                        "Content-Type": "application/json"
                    },

                }
            ).then(function(response) {
                return response.json();
            }).then((json)=>{
                hashHistory.push({
                    pathname:"/address"
                })
            }).catch(function(ex) {
                console.log('parsing failed', ex)
            })
        }

    }
    //确定按钮
    confirmButton(){
        this.changeStateVal("",false);
    }
    render(){
        return(
            <div style={{paddingTop:'15px',height:'100%',backgroundColor:'#efeff4'}}>
                <ul className="address-list" ref="address">
                    <li>
                        <input placeholder="请输入小区名字" id="villageName"/>
                    </li>
                    <li>
                        <input placeholder="请输入详细的门牌号" id="houseNumber"/>
                    </li>
                </ul>
                <div className="all-button9" onClick={this.addAddress.bind(this)}>确认</div>
                <Menus/>
                <div className={(this.state.show?'show':'hidden')+" " +"tip"}>
                    <div className="tip-content">
                        <div className="tip-inner">
                            <div className="tip-title">提示</div>
                            <div className="tip-text">{this.state.errorMessage}</div>
                        </div>
                        <div className="tip-buttons">
                            <span className="tip-button" onClick={this.confirmButton.bind(this)}>确定</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}